<template>
	<header>
		<img src="@/assets/images/logo.png" alt="智物芯" />

		<div class="main-p" v-if="isHome"></div>

		<div class="main-p" v-else-if="user.role === 0">
			<p :class="{ active: cNum === '1' }" @click="toFramework">架构设计</p>
			<p :class="{ active: cNum === '2' }" @click="toAnalysis">算力分析</p>
		</div>

		<div class="main-p" v-else>
			<p class="active" @click="toManage">系统管理</p>
		</div>

		<div class="auth-btn" v-if="isHome">
			<el-button type="primary" @click="toLogin">登录</el-button>
			<el-button @click="toRegister">注册</el-button>
		</div>

		<div class="auth-btn" v-else>
			<p>{{ userType }}：{{ user.name }}</p>
			<el-button @click="toHome">退出</el-button>
		</div>
	</header>
</template>

<script setup>
	import { ref } from 'vue'
	import { useRouter } from 'vue-router'
	import { ElMessage } from 'element-plus'
	import { userStore } from '@/store/user'

	const props = defineProps(['isHome', 'cNum'])

	const router = useRouter()

	const user = userStore()

	const userType =
		user.role === 0 ? '普通用户' : user.role === 1 ? '管理员' : user.role === 2 ? '超级管理员' : ''

	const toLogin = () => {
		router.push('/login')
	}

	const toRegister = () => {
		router.push('/register')
	}

	const toHome = () => {
		router.replace('/')
	}

	const toFramework = () => {
		// if (props.isHome === 'true') {
		// 	ElMessage({
		// 		message: '请先登录！！！',
		// 		type: 'warning'
		// 	})
		// 	return
		// }
		router.push('/framework')
	}

	const toAnalysis = () => {
		router.push('/analysis')
	}

	const toManage = () => {
		router.push('/manage/user')
	}
</script>

<style scoped lang='scss'>
	header {
		height: 100px;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: rgb(153, 4, 0);
		padding: 0 40px;
	}
	img {
		height: 80px;
		margin-right: 40px;
	}

	.main-p {
		flex: 1;
		height: 100%;
		display: flex;
		align-items: center;
		p {
			margin: 0 50px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			font-size: 24px;
			font-weight: bolder;
			color: #fff;
			cursor: pointer;
		}
		.active {
			border-bottom: #fff solid 3px;
		}
	}

	.auth-btn {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		p {
			margin-right: 20px;
			font-size: 20px;
			font-weight: bolder;
			color: #fff;
		}
		.el-button {
			width: 85px;
			height: 40px;
			font-size: 18px;
		}
	}
</style>    